<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>zauth</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../static/css/boot/bootstrap.min.css">
    <link rel="stylesheet" href="http://hoppinzq.com/static/css/vendor/ionicons.css"/>
    <link rel="stylesheet" href="../static/css/slidercaptcha.css" type="text/css" media="all"/>
    <link rel="stylesheet" href="../static/css/style.css" type="text/css" media="all"/>
    <link href="../static/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<section class="bg-white hero p-0">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-5 bg-light text-center col-fixed" style="padding: 20px">
                <h3>ZQ统一权限认证服务中心</h3>
                <section class="w3l-form-36">
                    <div class="form-36-mian section-gap">
                        <div class="wrapper" style="display: flex;justify-content: center">
                            <div class="form-inner-cont" id="login_page">
                                <h4 class="text-danger cz-type"></h4>
                                <h3>登录</h3>
                                <div class="signin-form">
                                    <span style="margin-left: 192px;visibility: collapse" id="login_username_tips">不是你的邮箱</span>
                                    <div class="form-input login_username" style="width: 306px;">
                                        <span class="fa fa-user-circle" aria-hidden="true"></span>
                                        <input type="text" name="username" id="login_username"
                                               data-isnull="false"
                                               data-isnullmessage="请输入用户名"
                                               data-min="6"
                                               data-minmessage="用户名长度要大于6位"
                                               data-max="32"
                                               data-maxmessage="用户名长度要小于32位"
                                               placeholder="用户名"/>
                                    </div>
                                    <div class="form-input login_password" style="width: 306px;">
                                        <span class="fa fa-key" aria-hidden="true"></span>
                                        <input type="password" name="password" id="login_password"
                                               data-isnull="false"
                                               data-isnullmessage="请输入密码"
                                               data-min="6"
                                               data-minmessage="密码长度要大于6位"
                                               data-max="32"
                                               data-maxmessage="密码长度要小于32位"
                                               placeholder="密码"/>
                                    </div>
                                    <div class="form-input none login_mobile">
                                        <span class="fa fa-mobile" aria-hidden="true"></span>
                                        <input type="text" name="mobile" id="login_mobile"
                                               data-isnull="false"
                                               data-isnullmessage="请输入手机号"
                                               data-num="11"
                                               data-minmessage="手机长度必须是11位"
                                               placeholder="手机号"/>
                                    </div>
                                    <div class="form-input none login_mobile_code">
                                        <span class="fa fa-key" aria-hidden="true"></span>
                                        <div style="display: flex;align-items: center;">
                                            <input type="text" name="login_mobile_code" id="login_mobile_code"
                                                   data-isnull="false"
                                                   data-isnullmessage="请输入手机验证号"
                                                   data-num="6"
                                                   data-nummessage="手机验证码长度必须是6位"
                                                   placeholder="6位验证码"/>
                                            <button class="btn theme-button send_code_login_btn">发送验证码</button>
                                        </div>

                                    </div>
                                    <div class="login-remember d-grid">
                                        <label class="check-remaind remember_username_login">
                                            <input type="checkbox">
                                            <span class="checkmark"></span>
                                            <p class="remember">记住用户名</p>
                                        </label>
                                        <label class="check-remaind">
                                            <p class="user_mobile_login login-sd" data-type="username">手机号登录</p>
                                        </label>
                                    </div>
                                    <div>
                                        <button class="btn theme-button login-btn user_login_btn">登录</button>
                                    </div>
                                    <div class="new-signup">
                                        <a class="login-default">一键登录(常用账号)</a>
                                    </div>
                                    <div class="new-signup">
                                        <a class="signuplink" onclick="alert('直接联系微信HOPPIN_HAZZ重置，还得浪费我一条短信')">忘记密码？</a>
                                    </div>
                                </div>

                                <div class="social-icons">
                                    <p class="continue"><span>Or</span></p>
                                    <div class="social-links social-links-dark">
                                        <a class="social-link" href="javaScript:void(0)" title="qq">
                                            <i class="fa fa-qq"></i>
                                        </a>
                                        <a class="social-link" href="javaScript:void(0)" title="weixin">
                                            <i class="fa fa-wechat"></i>
                                        </a>
                                        <a class="social-link" href="https://api.weibo.com/oauth2/authorize?client_id=1901755294&response_type=code&redirect_uri=http://1.15.232.156/oauth/weibo" title="weibo">
                                            <i class="fa fa-weibo"></i>
                                        </a>
                                        <a class="social-link"
                                           href="https://gitee.com/oauth/authorize?client_id=543d047606c0130cdd58d806e1b84f89e91abb253574cfdd1e6290fd90e15a28&redirect_uri=http%3A%2F%2F1.15.232.156%2Foauth%3Ftype%3Dgitee&response_type=code"
                                           title="gitee">
                                            <i class="fa fa-github"></i>
                                        </a>
                                    </div>
                                    <!--                    <div class="social-login threeLogin">-->
                                    <!--&lt;!&ndash;                        <a class="nqq" href="https://wiki.connect.qq.com/%E4%BD%BF%E7%94%A8authorization_code%E8%8E%B7%E5%8F%96access_token"></a>&ndash;&gt;-->
                                    <!--&lt;!&ndash;                        <a class="nwx" href="https://gitee.com/api/v5/oauth_doc#/"></a>&ndash;&gt;-->
                                    <!--&lt;!&ndash;                        <a class="gitee" href="https://gitee.com/oauth/authorize?client_id=543d047606c0130cdd58d806e1b84f89e91abb253574cfdd1e6290fd90e15a28&redirect_uri=http://hoppinzq.com&response_type=code"></a>&ndash;&gt;-->
                                    <!--                    </div>-->
                                </div>
                                <p class="signup">还没有账号? <a class="signuplink" id="register">注册</a></p>
                                <p class="mobile-show">简介<a href="#abortAuth">点我</a></p>
                            </div>

                            <div class="form-inner-cont" id="register_page" style="display:none;">
                                <h3>注册</h3>
                                <div class="signin-form">
                                    <span style="margin-left: 192px;visibility: collapse"></span>
                                    <div class="form-input register_username">
                                        <span class="fa fa-user-circle" aria-hidden="true"></span>
                                        <input type="text" name="register_username" id="register_username"
                                               data-isnull="false"
                                               data-isnullmessage="请输入用户名"
                                               data-min="6"
                                               data-minmessage="用户名长度要大于6位"
                                               data-max="32"
                                               data-maxmessage="用户名长度要小于32位"
                                               placeholder="用户名"/>
                                    </div>
                                    <div class="form-input register_email">
                                        <span class="fa fa-envelope-o" aria-hidden="true"></span>
                                        <input type="email" name="register_email" id="register_email"
                                               data-isnull="false"
                                               data-isnullmessage="请输入邮箱号"
                                               placeholder="邮箱号"/>
                                    </div>
                                    <div class="form-input register_email_code">
                                        <span class="fa fa-envelope-o" aria-hidden="true"></span>
                                        <div style="display: flex;align-items: center;">
                                            <input type="text" name="register_email_code" id="register_email_code"
                                                   data-isnull="false"
                                                   data-isnullmessage="请输入邮箱验证号"
                                                   data-num="6"
                                                   data-nummessage="邮箱验证号长度必须是6位"
                                                   placeholder="邮箱验证号"/>
                                            <button class="btn theme-button send_code_register_btn">发送验证码</button>
                                        </div>
                                    </div>
                                    <div class="form-input none register_mobile">
                                        <span class="fa fa-mobile" aria-hidden="true"></span>
                                        <input type="text" name="mobile" id="register_mobile"
                                               data-isnull="false"
                                               data-isnullmessage="请输入手机号"
                                               data-num="11"
                                               data-nummessage="手机号必须是11位"
                                               placeholder="手机号"/>
                                    </div>
                                    <div class="form-input none register_mobile_code">
                                        <span class="fa fa-mobile" aria-hidden="true"></span>
                                        <div style="display: flex;align-items: center;">
                                            <input type="text" name="register_mobile_code" id="register_mobile_code"
                                                   data-isnull="false"
                                                   data-isnullmessage="请输入手机验证号"
                                                   data-num="6"
                                                   data-nummessage="手机验证码长度必须是6位"
                                                   placeholder="手机验证号"/>
                                            <button class="btn theme-button send_code_register_btn">发送验证码</button>
                                        </div>
                                    </div>
                                    <div class="form-input register_password">
                                        <span class="fa fa-key" aria-hidden="true"></span>
                                        <input type="password" name="register_password" id="register_password"
                                               data-isnull="false"
                                               data-isnullmessage="请输入密码"
                                               data-min="6"
                                               data-minmessage="密码长度要大于6位"
                                               data-max="32"
                                               data-maxmessage="密码长度要小于32位"
                                               placeholder="密码"/>
                                    </div>
                                    <div class="form-input register_again_password">
                                        <span class="fa fa-key" aria-hidden="true"></span>
                                        <input type="password" name="register_again_password"
                                               id="register_again_password"
                                               data-isnull="false"
                                               data-isnullmessage="请输入确认密码"
                                               data-min="6"
                                               data-minmessage="确认密码长度要大于6位"
                                               data-max="32"
                                               data-maxmessage="确认密码长度要小于32位"
                                               data-same="#register_password"
                                               data-samemessage="两次密码不一致"
                                               placeholder="再次确认密码"/>
                                    </div>
                                    <div class="form-input register_code">
                                        <span class="fa fa-key" aria-hidden="true"></span>
                                        <div style="display: flex;align-items: center;">
                                            <input type="text" style="width: 90px;" name="register_code"
                                                   id="register_code"
                                                   data-isnull="false"
                                                   data-isnullmessage="请输入验证码"
                                                   data-num="4"
                                                   data-nummessage="验证码长度必须是4位"
                                                   placeholder="验证码"/>
                                            <canvas id="canvasCheck" width="120" height="40"></canvas>
                                            <span style="padding-left: 5px"><a id="changeImg">看不清，换一张</a></span>
                                        </div>
                                    </div>
                                    <div class="login-remember d-grid" style="margin-top: .5rem">
                                        <label class="check-remaind">
                                            <p class="user_mobile_register login-sd" data-type="email">手机号注册</p>
                                        </label>
                                    </div>
                                    <div>
                                        <button class="btn theme-button user_register_btn">注册</button>
                                    </div>
                                </div>
                                <p class="signup">已有账号?<a class="signinlink" id="login">登录</a></p>
                            </div>
                        </div>
                    </div>
                </section>
                <h6>须知：如果直接进入该 页面，登录成功是不知道重定向到什么页面，默认重定向至http://hoppinzq.com。你可以通过在url里携带redirect参数
                    来进行登录成功跳转，接入该服务请参照<a href="javaScript:void(0)" class="text-success">接入规则</a>，或者将上面内容嵌入到您的页面</h6>
            </div>
            <div class="col-sm-7 offset-sm-5 px-0 py-5" id="abortAuth">
                <section class="pt-4">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-sm-8 mx-auto text-center">
                                <div class="launch-text">HOPPINZQ</div>
                                <h2 class="text-success pb-3">关于zauth</h2>
                                <p class="text-muted">
                                    1、zauth是一套独立的sso(单点登录)服务，拥有一整套完整的注册、登录、第三方认证集成、权限认证的解决方案。
                                </p>
                                <p class="text-muted">
                                    2、支持邮箱、手机号注册登录，会通过邮箱或短信发送验证码。你可以学习到如何通过代码发送邮箱和短信。
                                </p>
                                <p class="text-muted">
                                    3、支持第三方认证服务，目前已可用的有QQ，微博及码云(gitee)认证。微信暂时不可用，因为不支持个人接入。<a class="text-success zAuth"
                                                                                              href="http://hoppinzq.com/static/images/auth/zAuth1.png">oauth2鉴权流程点我查看</a>
                                </p>
                                <p class="text-muted">
                                    4、支持:①服务同域，redis同源。②服务不同域，redis同源。其实redis不同源也很好做，就是懒得部署两套redis。
                                    最难的是不同域，也就是zauth服务跟要接入的服务在不同的两个域名或IP下，zauth通过签发一次性ucode解决cookie跨域写入问题。<a
                                        class="text-success zAuth" href="http://hoppinzq.com/static/images/auth/zauth服务.jpg">流程点我查看</a>
                                </p>
                                <p class="text-muted">
                                    5、zjax和剑来网关为ajax重定向和权限认证做了极大的支持，借助这两个项目，你可以很简单接入该认证服务。zjax支持解析后台自定义响应头redirect跟enableRedirect。
                                    剑来网关支持注解和通过接口配置权限，目前只有4种权限：未登录权限、登录权限、会员权限(VIP付费用户)、超级管理员权限。
                                </p>
                                <p class="text-muted">
                                    6、我写了一篇博客介绍，<a class="text-success" href="https://blog.csdn.net/qq_41544289/article/details/123065919" target="_blank"> 点我查看</a>
                                </p>
                            </div>
                        </div>
                        <div class="row d-md-flex mt-4">
                            <div class="col-md-12 col-sm-12 mx-auto text-center">
                                <h2 class="text-success pb-3">优点</h2>
                            </div>
                            <div class="col-sm-4 mt-2 text-center">
                                <p><em class="ion-checkmark icon-md text-success"></em></p>
                                <h4>简单易用而且安全</h4>
                                <p class="text-muted">比Apache Shiro和Spring
                                    Security要简单多了。虽然简单，但并不意味着zauth不安全。因为简单，所以可能会有一些我无法预料的问题</p>
                            </div>
                            <div class="col-sm-4 mt-2 text-center">
                                <p><em class="ion-pull-request icon-md text-success"></em></p>
                                <h4>服务分离，集成简单</h4>
                                <p class="text-muted">借鉴了Spring
                                    Security通过注解来细颗粒度控制权限的思想，你只需一个注解，就可以控制访问该接口的权限。
                                    只需配置一个白名单，就可以控制访问页面的权限。
                                    token规范并不是使用jwt，而是直接使用uuid作为token，减小了学习和使用成本
                                    （有关jwt，可参照<a class="text-success" target="_blank" href="https://blog.csdn.net/qq_41544289/article/details/123065919">我的博客中的jwt部分</a>）。<a
                                            href="http://hoppinzq.com/static/images/auth/zqAuth鉴权流程.jpg" class="text-success zAuth">点击查看请求认证的流程</a>
                                </p>
                            </div>
                            <div class="col-sm-4 mt-2 text-center">
                                <p><em class="ion-code-working icon-md text-success"></em></p>
                                <h4>专注于业务代码的开发</h4>
                                <p class="text-muted">直接集成，就可以拥有注册登录的功能，不必考虑用户注册登录的实现，也不必考虑跨域如何鉴权<a
                                        class="text-success zAuth" href="http://hoppinzq.com/static/images/auth/zAuth3.jpg">跨域流程点我查看</a></p>
                            </div>
                            <div class="col-sm-4 mt-2 text-center">
                                <p><em class="ion-ios-photos-outline icon-md text-success"></em></p>
                                <h4>第三方oauth服务？</h4>
                                <p class="text-muted">现在主流的应用都有自己的oauth鉴权流程。<a class="text-success zAuth"
                                                                                   href="http://hoppinzq.com/static/images/auth/zAuth1.png">oauth2鉴权流程点我查看</a>，流程比较复杂至少要调用三个接口
                                    ，zauth帮已经你集成了，你只需调用zauth的一个接口，就可以获取到第三方应用的用户信息。</p>
                            </div>
                            <div class="col-sm-4 mt-2 text-center">
                                <p><em class="ion-ios-photos-outline icon-md text-success"></em></p>
                                <h4>不会管理短信跟邮箱验证码？</h4>
                                <p class="text-muted">后端通过redis保存用户信息跟验证码，通过设置缓存时间控制有效期。前端通过storage控制有效期。参考我的设计，你能学到更多</p>
                            </div>
                        </div>
                    </div>
                </section>

                <section id="team">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-6 col-sm-8 mx-auto text-center">
                                <h2 class="text-success pb-3">开源地址</h2>
                                <a class="text-muted" href="https://gitee.com/hoppin" target="_blank">
                                    https://gitee.com/hoppin
                                </a>
                            </div>
                        </div>
                        <div class="row d-md-flex mt-4 text-center">
                            <div class="col-sm-12 mt-2 wow fadeIn">
                                <div class="card border-none">
                                    <div class="card-body">
                                        <img src="http://hoppinzq.com/static/images/092145_1c983e1b_5294558.jpg" alt="Male"
                                             class="img-team img-fluid rounded-circle"/>
                                        <h5 class="card-title pt-4">剑来框架zauth模块地址</h5>
                                        <a class="card-text text-muted" href="https://gitee.com/hoppin/hoppinzq/tree/master/hoppinzq-auth"
                                           target="_blank">https://gitee.com/hoppin/hoppinzq/tree/master/hoppinzq-auth</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

<!--                <section class="p-0" id="contact">-->
<!--                    <div class="container">-->
<!--                        <div class="row d-md-flex text-success text-center">-->
<!--                            <div class="col-sm-4 p-5">-->
<!--                                <p><em class="ion-link icon-md"></em></p>-->
<!--                                <h5>+92 5456 87595</h5>-->
<!--                            </div>-->
<!--                            <div class="col-sm-4 p-5">-->
<!--                                <p><em class="ion-ios-email-outline icon-md"></em></p>-->
<!--                                <h5>hi@syrup.io</h5>-->
<!--                            </div>-->
<!--                            <div class="col-sm-4 p-5">-->
<!--                                <p><em class="ion-ios-location-outline icon-md"></em></p>-->
<!--                                <h5>Lahore, Pakistan</h5>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </section>-->
            </div>
        </div>
    </div>
</section>
<div class="modal fade" id="loginModal" style="display:none;">
    <div class="modal-dialog modal-sm">
        <div class="modal-content" style="border:none;">
            <div class="col-left"></div>
            <div class="col-right">
                <div class="modal-header">
                    <button type="button" id="login_close" class="close" data-dismiss="modal"><span
                            aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="loginModalLabel" style="font-size: 18px;">请完成安全验证</h4>
                </div>
                <div class="modal-body" style="height: 230px">
                    <section class="box-login v5-input-txt" id="box-login"
                             style="padding:0px;display: flex;justify-content: center">
                        <div id="captcha"></div>
                    </section>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="http://hoppinzq.com/static/js/vendor/jquery-3.5.1.min.js"></script>
<script src="http://hoppinzq.com/static/js/vendor/popper.min.js"></script>
<script src="http://hoppinzq.com/static/js/vendor/bootstrap.min.js"></script>
<script src="http://hoppinzq.com/static/js/plugins/buttonLoading.js"></script>
<script src="../static/js/longbow.slidercaptcha.js"></script>
<script src="../static/js/EZView.js"></script>
<script>
    let zq = {
        checkRightCode: "",
        loginType: 0,//0表示用户名密码登录，1表示手机号登录
        registerType:0,//0表示邮箱注册，1表示手机注册
        type:0,//0表示登录操作,1表示注册发送验证码中，2表示注册,4表示登录发送验证码
    }
    $(function () {
        let urlParams=window.location.search.substring(1);
        if(urlParams.indexOf("cz___zauth=")!=-1){
            let vars = urlParams.split("&");
            for (let i = 0; i < vars.length; i++) {
                let pair = vars[i].split("=");
                if (pair[0] == "cz___zauth") {
                    if(pair[1]=="1"){
                        $(".cz-type").html("看起来要进入的页面需要登录权限");
                    }else if(pair[1]=="2"){
                        $(".cz-type").html("看起来要进入的页面需要登录用户具有会员权限");
                    }else if(pair[1]=="3"){
                        $(".cz-type").html("看起来要进入的页面需要登录用户具有超级管理员权限");
                    }
                }
            }
        }
        //一键登录
        $(".login-default").click(function () {
            zq.loginType=0;
            zq.type=0;
            $("#login_username").val("zhangqi");
            $("#login_password").val("123456");
            $(".login-btn").click();
        })
        /**
         * 为JQuery的Dom对象绑定校验规则
         * @Author hopppinzq
         * @param errfn 校验不成功回调
         * @param fn 自定义校验函数
         * @returns {boolean|*|jQuery|HTMLElement}
         */
        $.fn.formCheck = function (errfn,fn) {
            if (this.length == 0)
                return $(this);
            if (this.length > 1) {
                for (let i = 0; i < this.length; i++)
                    $(this[i]).formCheck(errfn,fn);
                return $(this);
            }
            let $me =$(this);
            if($me.data("isnull")!=undefined){
                if(!$me.data("isnull")){
                    if($me.val().trim().length===0){
                        alert($me.data("isnullmessage")||"不能为空！");
                        $me.focus();
                        if(errfn) errfn();
                        return false;
                    }
                }
            }
            if($me.data("num")!=undefined){
                if($me.val().trim().length!=parseInt($me.data("num"))){
                    alert($me.data("nummessage")||"填入的内容应该是"+parseInt($me.data("num"))+"位");
                    $me.focus();
                    if(errfn) errfn();
                    return false;
                }
            }else{
                if($me.data("max")!=undefined){
                    if($me.val().trim().length>parseInt($me.data("max"))){
                        alert($me.data("maxmessage")||"填入的内容太长了！");
                        $me.focus();
                        if(errfn) errfn();
                        return false;
                    }
                }
                if($me.data("min")!=undefined){
                    if($me.val().trim().length<parseInt($me.data("min"))){
                        alert($me.data("minmessage")||"填入的内容太短了！");
                        $me.focus();
                        if(errfn) errfn();
                        return false;
                    }
                }
            }
            if($me.data("same")!=undefined){
                let sel=$me.data("same");
                if($me.val()!=$(sel).val()){
                    alert($me.data("samemessage")||"填入数据不一致！");
                    $me.focus();
                    if(errfn) errfn();
                    return false;
                }
            }
            if($me.data("reg")!=undefined){
                let reg=$me.data("reg");
                if (!reg.test($me.val().trim())) {
                    alert($me.data("regmessage")||"格式不正确！");
                    $me.focus();
                    if(errfn) errfn();
                    return false;
                }
            }
            if(fn) return fn();
            return $(this);
        };

        init();
        $(".zAuth").EZView();
        $('#captcha').sliderCaptcha({
            repeatIcon: 'fa fa-redo',
            setSrc: function () {
                return '../static/images/ver-'+Math.round((Math.random() * 2)+1)+'.png';
            },
            onSuccess: function () {
                $("#login_close").click();
                switch(zq.type){
                    case 0:
                    default:
                        let user={};
                        if(zq.loginType==0){
                            user={
                                "username": $("#login_username").val(),
                                "password": $("#login_password").val(),
                                "isRemember": $(".check-remaind").find("input").is(":checked") ? 1 : 0
                            }
                        }
                        if(zq.loginType==1){
                            user={
                                "phone": $("#login_mobile").val(),
                                "code": $("#login_mobile_code").val(),
                            }
                        }
                        $.ajax({
                            url: "/hoppinzq?method=login",
                            data: JSON.stringify({
                                "user": user
                            }),
                            dataType: "json",
                            type: "post",
                            success: function (data) {
                                console.log(data)
                                if (data.code == 200) {
                                    //let zq_token=getCookie("ZQ_TOKEN");
                                    alert("登陆成功，有效时长7天");
                                    let query = window.location.search.substring(1);
                                    if (query == "") query="redirect=http://1.15.232.156";
                                    let reUrl = query.split("redirect=")[1];
                                    if (reUrl.indexOf("ucode=") != -1) {
                                        let gqCodeUrl = reUrl.split("ucode=")[1];
                                        if (gqCodeUrl.indexOf("?") == -1) {
                                            gqCodeUrl = data.data.ucode;
                                        } else {
                                            gqCodeUrl = data.data.ucode + gqCodeUrl.split("&")[1]
                                        }
                                        reUrl = reUrl.split("ucode=")[0] + "ucode=" + gqCodeUrl;
                                    } else {
                                        if (reUrl.indexOf("?") == -1) {
                                            reUrl += "?ucode=" + data.data.ucode;
                                        } else {
                                            reUrl += "&ucode=" + data.data.ucode;
                                        }
                                    }

                                    // if(reUrl.indexOf(window.location.host)==-1){
                                    //     $("body").append($("<iframe style='display: none' src='"+ip+"/cookie.html?cookie='"+zq_token+"&redirect="+reUrl+"></iframe>"));
                                    // }else{
                                    //     window.location.href=reUrl;
                                    // }
                                    window.location.href = reUrl;
                                } else {
                                    alert("登陆失败:" + JSON.stringify(data));
                                    $("#login_close").click();
                                }
                            }
                        })
                        break;
                    case 1:
                        let codeurl="/hoppinzq?method=registerEmail";
                        let codeuser={
                            "username": $("#register_username").val(),
                            "email": $("#register_email").val(),
                            "code": $("#register_email_code").val()
                        };
                        if(zq.registerType==1){//手机号发送验证码
                            codeurl="/hoppinzq?method=registerBySms";
                            codeuser={
                                "username": $("#register_username").val(),
                                "phone": $("#register_mobile").val(),
                                "code": $("#register_mobile_code").val()
                            };
                        }
                        $.ajax({
                            url: codeurl,
                            data: JSON.stringify({
                                "user": codeuser
                            }),
                            dataType: "json",
                            type: "post",
                            success: function (data) {
                                if (data.code == 200) {
                                    localStorage.setItem("zq:sendCode", new Date().getTime());
                                    if(zq.registerType==0){
                                        $("#register_email").prop('disabled', true);
                                        $("#register_email").css('cursor', "not-allowed");
                                        alert("发送成功！请注意查收邮箱");
                                    }else{
                                        $("#register_mobile").prop('disabled', true);
                                        $("#register_mobile").css('cursor', "not-allowed");
                                        alert("发送成功！请注意查收手机短信");
                                    }
                                }else{
                                    alert(data.msg);
                                    localStorage.removeItem("zq:sendCode");
                                }
                            },
                            error:function () {
                                localStorage.removeItem("zq:sendCode");
                            },
                            complete: function () {
                                $(".send_code_register_btn").buttonLoading('stop');
                            }
                        })
                        break;
                    case 2:
                        let registerurl="/hoppinzq?method=registerBySms";
                        let registeruser={
                            "username": $("#register_username").val(),
                            "email": $("#register_email").val(),
                            "password": $("#register_password").val(),
                            "code": $("#register_email_code").val()
                        };
                        if(zq.registerType==1){//手机号注册
                            registerurl="/hoppinzq?method=registerBySms";
                            registeruser={
                                "username": $("#register_username").val(),
                                "phone": $("#register_mobile").val(),
                                "password": $("#register_password").val(),
                                "code": $("#register_mobile_code").val()
                            };
                        }
                        $.ajax({
                            url: registerurl,
                            data: JSON.stringify({
                                "user": registeruser
                            }),
                            dataType: "json",
                            type: "post",
                            success: function (data) {
                                console.log(data)
                                if (data.code == 200) {
                                    alert("注册成功！请登录然后完善信息！");
                                    window.location.reload();
                                }else{
                                    alert(data.msg)
                                }
                            },
                            complete: function () {
                                $(".user_register_btn").buttonLoading('stop');
                            }
                        });
                        break;
                    case 4:
                        let loginUser={
                            "phone": $("#login_mobile").val()
                        };
                        $.ajax({
                            url: "/hoppinzq?method=sendMobileLogin",
                            data: JSON.stringify({
                                "user": loginUser
                            }),
                            dataType: "json",
                            type: "post",
                            success: function (data) {
                                console.log(data)
                                if (data.code == 200) {
                                    alert("发送成功，请注意手机短信！");
                                }else{
                                    alert(data.msg)
                                }
                            },
                            complete: function () {
                                $(".send_code_login_btn").buttonLoading('stop');
                            }
                        });
                        break;
                }
            },
            onFail:function () {

            }
        });
    })

    function getCookie(cname) {
        let name = cname + "=";
        let ca = document.cookie.split(';');
        for (let i = 0; i < ca.length; i++) {
            let c = ca[i].trim();
            if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
        }
        return "";
    }

    function init() {
        if (getCookie("ZQ_USER_NAME") != "") {
            $(".check-remaind").find("input").prop("checked", "checked");
            $("#login_username").val(getCookie("ZQ_USER_NAME"))
        }
        initLogin();
    }

    function initLogin() {
        $("#login_username").focus(function () {
            $("#login_username_tips").css("visibility", "visible");
        }).blur(function () {
            $("#login_username_tips").css("visibility", "collapse");
        });

        $(".login-btn").off("click").on("click", function () {
            if(zq.loginType==0){
                if ($("#login_username").val().length == 0) {
                    alert("请填写用户名");
                    $("#login_username").focus();
                    return;
                }
                if ($("#login_password").val().length == 0) {
                    alert("请填写密码");
                    $("#login_password").focus();
                    return;
                }

            }else if(zq.loginType==1){
                let phoneReg = /^[1][345678][0-9]{9}$/;
                if(!$("#login_mobile").formCheck(function () {
                },function () {
                    if (!phoneReg.test($("#login_mobile").val().trim())) {
                        alert("手机号格式不正确")
                        $("#login_mobile").focus();
                        return false;
                    }
                    return true;
                })){
                    return;
                }
                if ($("#login_mobile_code").val().length != 6) {
                    alert("请填写正确的手机验证码");
                    $("#login_mobile_code").focus();
                    return;
                }
            }
            zq.type=0;
            $("#loginModal").modal("show");
        }), function () {
            let moElement = [];
            $(".modal").on("show.bs.modal",
                function () {
                    for (let sIndex = 0; moElement.length > sIndex; sIndex++)
                        moElement[sIndex] && (moElement[sIndex].modal("hide"),
                        moElement[sIndex] = null);
                    moElement.push($(this));
                    let $model = $(this),
                        $modelDialog = $model.find(".modal-dialog"),
                        $modelDialogTable = $('<div style="display:table; width:100%; height:100%;"></div>');
                    $modelDialogTable.html('<div style="vertical-align:middle; display:table-cell;"></div>'),
                        $modelDialogTable.children("div").html($modelDialog),
                        $model.html($modelDialogTable)
                })
        }();

        $(".user_mobile_login").click(function () {
            if($(this).data("type")=="username"){
                $(this).data("type","phone").text("用户名密码登录");
                zq.loginType=1;
                zq.type=4;
                $(".login_username").hide();
                $(".login_password").hide().find("input").val("");
                $(".remember_username_login").css("visibility", "collapse");
                $(".login_mobile").show().css("display","grid");
                $(".login_mobile_code").show().css("display","grid");
            }else{
                $(this).data("type","username").text("手机号登录");
                zq.loginType=0;
                zq.type=0;
                $(".login_username").show();
                $(".login_password").show();
                $(".remember_username_login").css("visibility","visible");
                $(".login_mobile").hide().find("input").val("");
                $(".login_mobile_code").hide().find("input").val("");
            }
        });

        $(".send_code_login_btn").buttonLoading().click(function () {
            let $me=$(this);
            $me.buttonLoading('start');
            //检验注册手机号
            let phoneReg = /^[1][345678][0-9]{9}$/;
            if(!$("#login_mobile").formCheck(function () {
                $me.buttonLoading('stop')
            },function () {
                if (!phoneReg.test($("#login_mobile").val().trim())) {
                    alert("手机号格式不正确")
                    $("#login_mobile").focus();
                    $me.buttonLoading('stop');
                    return false;
                }
                return true;
            })){
                return;
            }
            zq.type=4;
            $("#login_close").off("click").on("click",function () {
                $me.buttonLoading('stop');
                $("#loginModal").modal("hide");
            })
            $("#loginModal").modal("show");
        })


        $("#register").click(function () {
            $("#login_page").fadeOut(500, function () {
                $("#register_page").fadeIn(500);
                initRegister();
                $("#register_page").find("input").each(function (index, element) {
                    $(element).val("");
                })
            })
            $("#login").on("click", function () {
                $("#register_page").fadeOut(500, function () {
                    $("#login_page").fadeIn(500);
                    $("#login_page").find("input").each(function (index, element) {
                        $(element).val("");
                    })
                    initLogin();
                })
            })
        })
    }

    function initRegister() {
        drawPic();
        $(".user_mobile_register").click(function () {
            if($(this).data("type")=="email"){
                $(this).data("type","phone").text("邮箱注册");
                $(".register_email").hide().find("input").val("");
                $(".register_email_code").hide().find("input").val("");
                $(".register_mobile").css("display","grid");
                $(".register_mobile_code").css("display","grid");
                zq.registerType=1;
            }else{
                $(this).data("type","email").text("手机号注册");
                $(".register_mobile").hide().find("input").val("");
                $(".register_mobile_code").hide().find("input").val("");
                $(".register_email").css("display","grid");
                $(".register_email_code").css("display","grid");
                zq.registerType=0;
            }
        })
        $(".send_code_register_btn").buttonLoading().click(function () {
            let sendTime = window.localStorage.getItem("zq:sendCode");
            let now = new Date().getTime();
            if (sendTime != null) {
                let timeC = now - parseInt(sendTime);
                if (timeC < 1000 * 60 * 5) {
                    alert("验证码仍有效，可在" + parseInt((1000 * 60 * 5-timeC)/1000) + "秒后重新发送。");
                    return;
                }
            }
            let $me = $(this);
            $me.buttonLoading('start');
            //校验注册用户名
            if(!$("#register_username").formCheck(function () {
                $me.buttonLoading('stop')
            })){
                return;
            }
            if(zq.registerType==0){
                //检验注册邮箱
                let emailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
                if(!$("#register_email").formCheck(function () {
                    $me.buttonLoading('stop')
                },function () {
                    if ($("#register_email").val().lastIndexOf("163.com") == -1) {
                        alert("现在只支持163邮箱")
                        $("#register_email").focus();
                        $me.buttonLoading('stop');
                        return false;
                    }
                    if (!emailReg.test($("#register_email").val().trim())) {
                        alert("邮箱格式不正确")
                        $("#register_email").focus();
                        $me.buttonLoading('stop');
                        return false;
                    }
                    return true;
                })){
                    return;
                }
            }else{
                //检验注册手机号
                let phoneReg = /^[1][345678][0-9]{9}$/;
                if(!$("#register_mobile").formCheck(function () {
                    $me.buttonLoading('stop')
                },function () {
                    if (!phoneReg.test($("#register_mobile").val().trim())) {
                        alert("手机号格式不正确")
                        $("#register_mobile").focus();
                        $me.buttonLoading('stop');
                        return false;
                    }
                    return true;
                })){
                    return;
                }
            }
            zq.type=1;
            $("#login_close").off("click").on("click",function () {
                $(".send_code_register_btn").buttonLoading('stop');
                $("#loginModal").modal("hide");
            })
            $("#loginModal").modal("show");
        });

        $(".user_register_btn").buttonLoading().click(function () {
            let $me = $(this);
            $me.buttonLoading('start');
            //检验注册用户名
            if(!$("#register_username").formCheck(function () {
                $me.buttonLoading('stop')
            })){
                return;
            }
            if(zq.registerType==0){
                //检验邮箱验证码
                if(!$("#register_email_code").formCheck(function () {
                    $me.buttonLoading('stop')
                })){
                    return;
                }
            }else{
                //检验手机验证码
                if(!$("#register_mobile_code").formCheck(function () {
                    $me.buttonLoading('stop')
                })){
                    return;
                }
            }

            //检验密码
            if(!$("#register_password").formCheck(function () {
                $me.buttonLoading('stop')
            })){
                return;
            }

            //确认密码
            if(!$("#register_again_password").formCheck(function () {
                $me.buttonLoading('stop')
            })){
                return;
            }

            //4位验证码
            if(!$("#register_code").formCheck(function () {
                $me.buttonLoading('stop')
            },function () {
                if ($("#register_code").val().trim().toLowerCase()!=zq.checkRightCode.toLowerCase()) {
                    alert("验证码错误");
                    $("#register_code").focus();
                    $me.buttonLoading('stop');
                    $("#register_code").val("");
                    drawPic();
                    return false;
                }
                return true;
            })){
                return;
            }
            zq.type=2;
            $("#login_close").off("click").on("click",function () {
                $(".user_register_btn").buttonLoading('stop');
                $("#loginModal").modal("hide");
            })
            $("#loginModal").modal("show");
        })
    }

    // 原生JS+canvas模拟验证码生成
    // 原理很简单，使用canvas提供的画笔绘制数字、字母、干扰线、干扰点。随机颜色，随机字符，半随机位置，半随机旋转角度，随机背景
    // 重绘生成的随机验证码存储在zq.checkRightCode
    // by hoppinzq

    function randomNum(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
    }

    /**
     * 随机色
     * @param min
     * @param max
     * @returns {string}
     */
    function randomColor(min, max) {
        let r = randomNum(min, max);
        let g = randomNum(min, max);
        let b = randomNum(min, max);
        return "rgb(" + r + "," + g + "," + b + ")";
    }

    //看不清？换一张
    document.getElementById("changeImg").onclick = function (e) {
        e.preventDefault();
        drawPic();
    }

    //重画
    function drawPic() {
        let canvas = document.getElementById("canvasCheck");
        let width = canvas.width;
        let height = canvas.height;
        let ctx = canvas.getContext('2d');
        ctx.textBaseline = 'bottom';

        //绘制背景色
        ctx.fillStyle = randomColor(180, 240);
        ctx.fillRect(0, 0, width, height);
        //绘制文字
        zq.checkRightCode = "";
        let str = 'ABCEFGHJKLMNPQRSTWXY13456789'; //去掉D,I,O,U,Z,2。因为容易混
        for (let i = 0; i < 4; i++) {
            let txt = str[randomNum(0, str.length)];
            zq.checkRightCode += txt;
            ctx.fillStyle = randomColor(50, 160);  //随机生成字体颜色
            ctx.font = randomNum(25, 40) + 'px SimHei'; //随机生成字体大小
            let x = 10 + i * 25;
            let y = randomNum(25, 45);
            let deg = randomNum(-45, 45);
            //修改坐标原点和旋转角度
            ctx.translate(x, y);
            ctx.rotate(deg * Math.PI / 180);
            ctx.fillText(txt, 0, 0);
            //恢复坐标原点和旋转角度
            ctx.rotate(-deg * Math.PI / 180);
            ctx.translate(-x, -y);
        }
        //绘制干扰线
        for (let i = 0; i < 5; i++) {
            ctx.strokeStyle = randomColor(40, 180);
            ctx.beginPath();
            ctx.moveTo(randomNum(0, width), randomNum(0, height));
            ctx.lineTo(randomNum(0, width), randomNum(0, height));
            ctx.stroke();
        }
        //绘制干扰点
        for (let i = 0; i < 50; i++) {
            ctx.fillStyle = randomColor(0, 255);
            ctx.beginPath();
            ctx.arc(randomNum(0, width), randomNum(0, height), 1, 0, 2 * Math.PI);
            ctx.fill();
        }
    }
</script>
</body>
</html>
